<template>
  <div class="about">
    <h1>reactive</h1>
    <h2>{{ obj2 }}</h2>
    <button @click="change">修改</button>
  </div>
</template>

<script setup lang="ts">
import { reactive, readonly, toRaw } from "vue";

interface ObjT {
  name: string;
  age: number;
}

// 1.变量类型约束，不推荐，因为对于变量的类型约束不是很完善
const obj: ObjT = reactive({
  name: "小米",
  age: 19,
  sex: "女",
});

// 2.函数泛型约束
const obj2 = reactive<ObjT>({
  name: "张三",
  age: 19,
});

// let obj3 = reactive<ObjT |any>({});
// let change = () => {
//   // obj3 = { name: "李四", age: 19 };
//   obj3.name="李四";
//   obj3.age=18;
// };

// 3.readonly：只读，把数据传入该函数，该函数的返回值变为只读数据
let change = () => {
  // obj3 = { name: "李四", age: 19 };
  obj2.name="李四";
  obj2.age=18;
};

let newObj2=readonly(obj2);
console.log(newObj2);
obj2.name="qqq";

// 5.roRaw:获取由reactive定义的数据的原始数据类型
let originalObj2=toRaw(obj2);
console.log(originalObj2);
</script>
